import React from 'react';
import PropTypes from 'prop-types';
import {Button, StyleSheet, Text, View, TextInput} from 'react-native';
import Header from "../basic-components/Header";
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

class LoginScreen extends React.Component {

  state = {
    account: '',
    password: '',
  }

  static navigationOptions = {
    header: (props) => <Header {...props}/>,
    title: '登录',
    headerRight:
      <View style={{flexDirection: 'row'}}>
        <Text style={{color: '#fff'}}>less</Text>
      </View>,
    goBack: () => console.log('goBack'),
  }

  componentDidMount() {
    this.didBlurSubscription = this.props.navigation.addListener('didFocus', () => {
      console.log('didBlurSubscription')
    })
  }

  componentWillUnmount() {
    this.didBlurSubscription && this.didBlurSubscription.remove();
  }

  render() {
    return (
      <KeyboardAwareScrollView>
        <View testID='LoginScreen' style={styles.container}>
          <Text style={styles.welcome}>
            Screen A
          </Text>
          <Text style={styles.instructions}>
            This is great
          </Text>

          <TextInput
            testID='account'
            style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}}
            onChangeText={(text) => this.setState({account: text})}
            value={this.state.account}
          />
          <TextInput
            testID='password'
            style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}}
            onChangeText={(text) => this.setState({password: text})}
            value={this.state.password}
          />
          <Button
            testID='loginButton'
            onPress={() => {
              this.props.navigation.dispatch({type: 'Login'})
            }}
            title="Log in"
          />
        </View>
      </KeyboardAwareScrollView>
    )
  }
}


export default LoginScreen;
